<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染-2</title>
</head>
<body>


<div id="app">

</div>


</body>
<script src="../lib/react/react.development.js"></script>
<script src="../lib/react/react-dom.development.j.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">


    class UserGreeting extends React.Component {

        constructor(props){
            super(props)
        }

        render() {
            return (<h1>欢迎回来！</h1>);
        }


    }
    //
    class GuestGreeting extends  React.Component{
        constructor(props){
            super(props)
        }


        render() {
            return (
                <h1>请先注册！</h1>
            );
        }
    }


    class LoginPage extends React.Component {

        constructor(props) {
            super(props);


            this.loginClick=this.loginClick.bind(this);
            this.loginOutClick=this.loginOutClick.bind(this);

            this.state = {
                isLoggedIn: false
            }
        }



        loginClick(){
            this.setState({
                isLoggedIn:true
            })
        }

        loginOutClick(){
            this.setState({
                isLoggedIn:false
            })
        }


        render() {

            const isLoggedIn = this.state.isLoggedIn;


           let view = <GuestGreeting/>;


           if (isLoggedIn){
                view = <UserGreeting/>;
           }

            return (
                <div>
                    <div>
                        {view}
                    </div>
                    <div>
                        <button onClick={this.loginClick}>登录</button>
                        <button onClick={this.loginOutClick}>退出</button>
                    </div>
                </div>
            )

        }

    }


    ReactDOM.render(<LoginPage/>,document.getElementById('app'));


</script>
</html>